<template>
  <div>
    <div class="page1-top" :style="{backgroundImage: 'url('+bannerUrl+')'}"></div>
    <div class="page3-bottom ani" swiper-animate-effect="zoomIn" swiper-animate-duration=".3s" swiper-animate-delay=".3s">
      <title-card class="title" :title="'在线办理'" :en="'Online'"></title-card>
      <img :src="codeUrl" alt="" class="codeUrl">
    </div>
  </div>
</template>

<script>

  import titleCard from 'src/views/titleCard/titleCard'
  export default {
    data () {
      return {}
    },
    props: {
      bannerUrl: {
        type: String,
        default () {
          return ''
        }
      },
      codeUrl: {
        type: String,
        default () {
          return ''
        }
      }
    },
    methods: {
    },
    components: {
      titleCard
    },
    created () {
    }
  }
</script>

<style lang="scss" scoped>
  .page1-top {
  	position: relative;
  	height: rem(410);
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	&::after {
  		position: absolute;
  		content: '';
  		width: 100%;
  		height: 100%;
  		left: 0;
  		top: 0;
  		background-color: rgba(0, 0, 0, 0.3);
  	}
  }
  .page3-bottom {
  	height: rem(1100);
  	.codeUrl {
  		margin: rem(10) 0 0 rem(172);
  		height: rem(500);
  	}
  }
</style>
